<template>
  <div>
    <!-- 导航栏标题 -->
    <van-nav-bar title="饮品分类" left-arrow @click-left="onClickLeft" />

    <!-- 饮品分类列表 -->
    <van-card @click="showPopup(item.id)" v-for="item in drinkTypelist" :key="item.id" :desc="item.labels " :title="item.title"
      :thumb="item.images">
      <template #tags>
        <van-tag size="medium" color="#ffe1e1" text-color="#ad0000">{{ item.texta }}</van-tag>
        <van-rate size="14" :model-value="item.star" icon="like" void-icon="like-o" />
        <p style="margin-top: 10px;">"{{ item.textb }}"</p>

      </template>
      <template #footer>
        <div>{{ item.num }}人已评论</div>
      </template>
    </van-card>

    <!-- 弹出层 -->
    <van-popup v-model:show="show" :style="{ padding: '64px' }">
      <img style="width: 100%; height: 100px; object-fit: cover;" :src="drinkTypelistId.images" alt="">

      <p style="color: #666;">{{ drinkTypelistId.texte }}
      </p>
    </van-popup>
  </div>
</template>

<script setup>
import httpApi from '@/http';
import { ref, onMounted } from 'vue';

const onClickLeft = () => history.back();
const drinkTypelist = ref([])
const drinkTypelistId = ref([]) //存储id
//存储列表项的id
const selectedItemId = ref('');
console.log(selectedItemId);
// const value = ref()
onMounted(() => {
  httpApi.IndexApi.queryDrinkTypeList().then(res => {
    console.log(res);
    drinkTypelist.value = res.data.data
  })
})



const show = ref(false);
const showPopup = (itemId) => {
  selectedItemId.value = itemId;
  //通过id查询
  httpApi.IndexApi.queryDrinkTypeId(selectedItemId.value).then(res => {
    console.log(res);
    drinkTypelistId.value = res.data.data
  })

  show.value = true;
};
</script>

<style lang="scss" scoped></style>